<template>
  <div id="all"  @click="ifonload = false">
    <mt-header class="header" fixed title="华邦商城">
      <router-link to="/" slot="left">
        <mt-button v-show="ifBack" @click="back" icon="back">返回</mt-button>
      </router-link>
      <mt-button icon="more" slot="right"></mt-button>
    </mt-header>
    <transition name='router'>
      <router-view class="content" :style="[{'z-index':ifBack? '50':'0'},{'padding-bottom':ifBack? '0':'1rem'}]" :class="{act:ifonload}"></router-view>
    </transition>
    <div @click="tabbar">
    <mt-tabbar :style="{'z-index':ifBack? '-1':''}" class="tabbar" fixed v-model="selected">
      <mt-tab-item href="#/" id="home">
        <img class="tabbarImg" slot="icon" src="./common/images/home.png">
        <img class="tabbarImg_on" slot="icon" src="./common/images/home-on.png">
        首页
      </mt-tab-item>
      <mt-tab-item href="#/list" id="list">
        <img slot="icon" class="tabbarImg" src="./common/images/list.png">
        <img class="tabbarImg_on" slot="icon" src="./common/images/list-on.png">
        分类
      </mt-tab-item>
      <mt-tab-item href="#/cart" id="cart">
        <img slot="icon" class="tabbarImg" src="./common/images/cart.png">
        <img class="tabbarImg_on" slot="icon" src="./common/images/cart-on.png">
        购物车
      </mt-tab-item>
      <mt-tab-item href="#/my" id="my">
        <img slot="icon" class="tabbarImg" src="./common/images/my.png">
        <img class="tabbarImg_on" slot="icon" src="./common/images/my-on.png">
        我的
      </mt-tab-item>
    </mt-tabbar>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ifBack: false,
      selected: '',
      ifonload: true
    }
  },
  methods: {
    tabbar () {
      this.ifonload = false
    },
    back () {
      this.$router.go(-1)
    }
  },
  created () {
  },
  updated () {
    this.selected = this.$router.history.current.name
  },
  watch: {
    '$route.path' (newval) {
      if (newval !== '/' && newval !== '/list' && newval !== '/cart' && newval !== '/my') {
        this.ifBack = true
      } else {
        this.ifBack = false
      }
    }
  }
}
</script>

<style>
#all{
  width: 7.5rem;
  position: relative;
  overflow: hidden;
  margin: auto;
  background-color: #f3f3f3;
}
.router-enter{
  transform: translateX(7.5rem);
  position: absolute;
}
.router-leave-to{
  transform: translateX(-7.5rem);
  position: absolute;
}
.router-enter-to,.router-leave{
  transform: translateX(0rem);
}
.router-enter-active,.router-leave-active{
  transition: transform .5s ease;
}
.mint-header{
  background-color: #f56d02 !important;
  z-index: 100 !important;
}
.is-selected .tabbarImg{
  display: none;
}
.is-selected .tabbarImg_on{
  display: block !important;
}
.mint-tab-item-icon .tabbarImg_on{
  display: none;
}
.mint-tabbar > .mint-tab-item.is-selected{
  color: #f56d02 !important;
}
.header{
  width: 7.5rem;
  height: 0.8rem !important;
  margin: auto;
}
.tabbar{
  width: 7.5rem;
  height: 1rem;
  margin: auto;
}
.content{
  width: 7.5rem;
  margin: 0.8rem auto 0;
  padding-bottom: 1rem;
}
.act{
  transition: all 0s;
}
</style>
